<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>倒计时</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			.t {
				width: 190px;
				height: 260px;
				margin: 200px auto;
				color: #fff;
				font-weight: bold;
				background: url(img/jingdong.png) no-repeat;
				background-size: 100%;
				position: relative;
				padding-top: 15px;
			}
			
			.t h1 {
				text-align: center;
				font-size: 30px;
				font-weight: bold;
			}
			
			.countdown {
				position: absolute;
				bottom: 85px;
				left: 30px;
			}
			
			.countdown span {
				font-size: 18px;
			}
			
			.time {
				position: absolute;
				bottom: 40px;
				left: 40px;
				text-align: center;
			}
			
			.time span {
				display: inline-block;
				width: 30px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				background: #333;
				color: #fff;
			}
		</style>
	</head>

	<body>
		<div class="t">
			<h1>京东秒杀</h1>
			<!--倒计时-->
			<div class="countdown">
				<span>20:00</span> 点场 倒计时
			</div>
			<div class="time">
				<span class="h"></span> :
				<span class="m"></span> :
				<span class="s"></span>
			</div>
		</div>
		<script>
			/*
				   知道秒杀的结束时间
				 知道电脑当前时间
				 相差的时间     需要把当前的时间转成时间戳再去计算    getTime()
				 根据相差的时间算出剩余多少小时、多少分钟、多少秒
				  一直执行的计时器
				 取到的时分秒，赋值到相应的span里
				 秒杀结束的时候，计时器停止执行
			*/

			//设置秒杀的结束时间
			var endtime = new Date('2019-09-06 24:00:00').getTime();
			var h = 0;
			var m = 0;
			var s = 0;

			//创建一个秒杀的函数
			function seckill() {
				//获取当前的时间
				var nowtime = new Date().getTime();
				//计算出相差的秒数
				var disparity = (endtime - nowtime) / 1000;
				disparity = parseInt(disparity);
				//计算剩余的小时
				h = parseInt(disparity / 3600);
				m = parseInt(disparity / 60 % 60);
				s = disparity % 60;

				//如果时、分、秒、是一位的时候，那么就在前面加上一个 0
				//h = h < 10 ? '0' + h : h
				if(h < 10) {
					h = '0' + h
				}
				if(m < 10) {
					m = '0' + m
				}
				if(s < 10) {
					s = '0' + s
				}
				//如果倒计时剩余的描述小于0，就停止计时器
				if(disparity<=0){
					clearInterval(t);
					console.log('秒杀已结束');
				}
				document.querySelector(".h").innerHTML = h;
				document.querySelector(".m").innerHTML = m;
				document.querySelector(".s").innerHTML = s;
			}

			seckill();
			//每秒执行一次秒杀函数
			var t = setInterval(seckill, 1000);
		</script>
	</body>

</html>